<!DOCTYPE html>
<html lang="zn-CN">
<head>
    <meta charset="UTF-8">
    <title>IP监控系统登录</title>
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="static/css/login.css">
    <link rel="shortcut icon" href="static/picture/swpu01.ico" />
    <script src="static/layui/layui.js"></script>
<!--    //<script src="layer.js"></script>-->
</head>

<body>

<script>
    layer.msg('Hello User ( :');
</script>

<div class="login-main">
    <header class="layui-elip">管理员登录</header>
    <form class="layui-form" name="formLogin" method="post" action="dataTest.html"
          id="loginForm" lay-filter="loginForm">
        <div class="line1" id="account">
            <input type="text" name="account" required  lay-verify="required"
                   placeholder="用户名" autocomplete="off" class="layui-input">
        </div>
        <div class="line1" id="password">
            <input type="password" name="password" required  lay-verify="required"
                   placeholder="密码" autocomplete="off" class="layui-input">
        </div>
        <div class="line1 login-btn">
            <button class="layui-btn"  lay-submit lay-filter="login">登录</button>
        </div>
    </form>

</div>
<script type="text/javascript">
    layui.use(['jquery','form', 'layer'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;

        form.on('submit(login)', function(data){
            var enterPassword = data.field.password;
            var enterAccount = data.field.account;
            var tempAccount = 0, tempPassword = 0;  //0为输入账号不存在， 1为正确且存在
            // 使用ajax 获取数据库中 manager 账号信息， 准备开始做验证
            $.ajax({
                url: '/loginFirst/listManager',
                type: 'get',
                dataType: 'json',
                success:function (res) {
                    //data 为测试数据， 判断是否成功从数据库返回数据； tempAccount是账号验证； tempPassword类似
                    var data = res.data;
                    console.log(data);
                    // 验证逻辑为 将文本框输入内容和数据库返回数据依次对比（效率可能较低，后期改进可以从这里下手）
                    $.each(data,function (index, el) {
                        if (el.account == enterAccount) {
                            tempAccount = 1;
                            if (el.password == enterPassword) {
                                tempPassword =1;
                            }
                        }
                    });
                    if (tempAccount === 0){
                        layer.msg('您输入的账号有误，请重新输入');
                        tempAccount = 0;
                        tempPassword = 0;
                        return  false;
                    } else if (tempPassword === 0) {
                        layer.msg('账号或密码错误，请重新输入');
                        tempAccount = 0;
                        tempPassword = 0;
                    } else if(tempAccount ===1 && tempPassword === 1){
                        layer.msg('登录成功！');
                        setTimeout("javascript:location.href='ipIndex.html'", 300);
                        // setTimeout("javascript:location.href='dataTest.html'", 300);
                        }
                }
            });
            console.log(tempAccount);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

</body>
</html>